.investPopupHeight {
  background: transparent;
}

.mark-six-box {
  width: 100%;
  position: relative;
  height: 100%;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
  }

  .popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    height: var(--investPopupHeight);
    background: rgba(23, 26, 38, 1);

    .top-box {
      box-sizing: border-box;
      height: 27px;
      width: 100%;
      padding: 0px 15px;
      background: linear-gradient(180deg, #7065f0 0%, #5c52d4 100%);
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      .left-box {
        height: 100%;
        width: 20px;
        max-width: 40px;
        .content {
        }
      }

      .center-box {
        height: 100%;
        flex: 1;
        .content {
          width: 41px;
          height: 3px;
          border-radius: 6px;
          background: #505e92;
        }
      }

      .right-box {
        width: 20px;
        max-width: 40px;
        height: 100%;
        .content {
        }
      }
    }

    .pop {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      box-sizing: border-box;
      background: rgba(23, 26, 38, 1);
      padding-top: 12px;
      box-sizing: border-box;

      .popup-lf {
        width: 74px;
        border-radius: 0 5px 5px 0;
        color: #a4b5f2;
        background: #2a2d47;
        max-height: 277px;
        overflow-y: auto;
        scroll-behavior: smooth;

        .li {
          font-size: 13px;
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;

          &.actives {
            border-left: none;
            position: relative;
            color: #fff;
            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              width: 4px;
              height: 100%;
              background: linear-gradient(180deg, #9077ff 0%, #4b3ef6 100%);
              border-radius: 0 12px 12px 0;
            }
          }
        }
      }

      .popup-content {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 10px 5px 10px;
        box-sizing: border-box;
        overflow: hidden;
      }

      .pop-tailbox {
        max-height: 220px;
        overflow-y: auto;
      }

      .popup-rg {
        margin-bottom: 20px;
        flex: 1;
        box-sizing: border-box;
        margin-left: 5px;
        padding: 3px;
        background-image: linear-gradient(to bottom, #f0f2f7, #dae1f4);
        border-radius: 5px;
        .pop-tailbox {
          .pop-tailtext {
            font-size: 10px;
            color: #7084ce;
            text-align: left;
            margin-left: 0px;
            .span1 {
              font-size: 10px;
              color: red;
              .span2 {
                font-size: 12px;
              }
            }
          }
          .pop-tailnum {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .pop-tailboxbox {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 1px solid #a2b6ff;
              background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
              margin: 2px 1px;
              padding: 2px 2px;
              border-radius: 5px;
              .pop-tailnums {
                width: 19px;
                height: 19px;
                border: 1px solid #a2b6ff;
                border-radius: 50%;
                background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
                line-height: 19px;
                color: #3d65fb;
              }
              .pop-tailnumss {
                color: #7b85a6;
                font-size: 11px;
                margin-left: 2px;
              }
            }
            .popactives {
              background: #3d65fb;
              .pop-tailnumss {
                color: #ffff;
              }
            }
          }
        }
        .pop-rg {
          box-sizing: border-box;
          margin-left: 5px;
          padding: 3px;
          background-image: linear-gradient(to bottom, #f0f2f7, #dae1f4);
          border-radius: 5px;
          .pop-text {
            font-size: 10px;
            color: #7084ce;
            text-align: left;
          }
          .pop-namebox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 5px;
            .pop-name {
              border: 1px solid #afbdef;
              border-radius: 5px;
              //    flex: 1;
              width: 22%;
              color: #5e6994;
              margin: 0 2px;
              padding: 1px 0;
              background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
              .pop-names {
                font-size: 10px;
              }
              .pop-texts {
                font-size: 9px;
              }
            }
            .activeti {
              background: #3d65fb;
              color: #c1bebe;
            }
          }
        }
        .poprg-btm {
          .pop-text {
            font-size: 10px;
            color: #7084ce;
            text-align: left;
            margin-left: 10px;
          }
          .pop-namebox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .pop-name {
              border: 1px solid #4570f2;
              border-radius: 50%;
              color: #4570f2;
              width: 23.5px;
              height: 23.5px;
              margin: 3px 6px;
              line-height: 23.5px;
              background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
              .pop-names {
                font-size: 12px;
              }
            }
            .activete {
              background-image: linear-gradient(to bottom, #6a98ff, #254ee7);
              color: #fff;
            }
          }
        }
      }
    }
  }
}
